<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟DOM</title>
</head>

<body>

</body>
<script>
    var node = {
        tag: 'div',
        props: {
            id: 1,
            class: 'myDiv'
        },
        children: [
            {
                tag: 'h1',
                props: { id: 'h1' },
                children: '我的标题'
            },
            {
                tag: 'span',
                props: { color: 'orange' },
                children: '哈哈哈哈哈哈'

            }
        ]

    }
    function createDom(node) {
        if (!node) return;
        var elem = document.createElement(node.tag);
        for (let key in node.props) {
            elem.setAttribute(key, node.props[key]);
            // elem[key] = node.props[key];
        }
        console.log(Object.prototype.toString.call(node.children));
        if (typeof node.children === 'string') {
            // elem.innerText = node.children;
            var textNode = document.createTextNode(node.children)
            elem.appendChild(textNode);
        } else if (typeof node.children === 'object') {
            node.children.map((item, i) => {
                var child = createDom(item);
                elem.appendChild(child);
            });
        }
        return elem;
    }
    var DOM = createDom(node);
    document.body.appendChild(DOM);
    console.log(DOM);

    // 类
    class Point {
        constructor(x, y) {
            // 实例属性
            this.x = x;
            this.y = y;
            this.fun = () => {
                console.log('11111');
            }
        }
        // 实例方法
        toString() {
            return '(' + this.x + ', ' + this.y + ')';
        }
        // 静态方法
        static flag() {
            console.log('aaaaaa');
        }
    }
    var a = new Point(1, 2);
    console.log(a.toString);
    console.log(Point.fun());
    console.log(Point.flag.toString());

    var res = ''
    function fun(str) {
        var index1 = str.indexOf(']');
        var index2 = str.lastIndexOf('[');
        if (index1 === -1 && index2 === -1) return;
        var temp = str.substring(index2, index1 + 1);
        var index3 = temp.indexOf('|');
        var temp2 = temp.substring(index3 + 1, temp.length - 1).repeat(temp.substring(1, index3));
        res = str.substring(0, index2) + temp2 + str.substring(index1 + 1, str.length);
        console.log(res);
        fun(res);
        return res;
    }
    fun('HG[3|B[2|CA]]F');

</script>

</html>